<template>
<!-- <div>
    <div id="echartsDemo" style="width: 800px;height:700px"></div>
</div> -->
<el-tabs type="border-card" >
  <el-tab-pane label="人事管理">
    <template >
        <div id="echartsDemo1" style="width: 800px;height:500px"></div>
    </template>
  </el-tab-pane>
  <el-tab-pane label="聊天信息管理">
     <template >
        <div id="echartsDemo2" style="width: 800px;height:500px"></div>
    </template>
  </el-tab-pane>
  </el-tabs>
    
    
</template>
<script>
 import {getAuthorityList} from '../../util/api.js'
  export default {
    data () {
      return {
          authorityList:[],
          token:''
        
      }
    },
    created(){
        var id=window.sessionStorage.getItem('id')
        var token=window.sessionStorage.getItem('token')
        this.token=token
            //得到list
        // this.getList()
        //注意数据的次序
    },
    mounted()
    {
        // var id=window.sessionStorage.getItem('id')
        // var token=window.sessionStorage.getItem('token')
        // this.token=token
            //得到list
        this.getList()
        // console.log(this.authorityList)
        // this.create_tree1()
        // this.create_tree2()
        // console.log("OK")

    },
    methods: {
    async getList()
     {
         //根据得到login的list 回JSON
        this.authorityList =JSON.parse(window.sessionStorage.getItem('authorityList'))
        this.$message.success("获取数据成功")  
        console.log(this.authorityList)
        this.create_tree1()
        this.create_tree2()
        console.log("OK")

     },
    
     
       create_tree1()
    {
        let elementById = document.getElementById('echartsDemo1')
        let echartsDemo1 = this.$echarts.init(elementById)
      for(var i=0;i< this.authorityList[0].children.length;i++)
      {
          if(this.authorityList[0].children[i].state==false)
          {
              this.authorityList[0].children[i].lineStyle={
                color:"#0000ff",
                borderColor:"#0000ff"
            }
          }
        else{//还是true继续遍历
            for(var j=0;j< this.authorityList[0].children[i].children.length;j++)
            {
                if(this.authorityList[0].children[i].children[j].state==false)
                {
                     this.authorityList[0].children[i].children[j].lineStyle={
                        color:"#0000ff",
                        borderColor:"#0000ff"
                    }
                }
            }
        }
      }

        let option = {
          tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series:[
                {
                    type: 'tree',
                    id: 0,
                    name: 'tree1',
                    data: [this.authorityList[0]],
                    top: '10%',
                    left: '8%',
                    bottom: '22%',
                    right: '20%',

                    symbolSize: 7,

                    edgeShape: 'polyline',
                    edgeForkPosition: '63%',
                    initialTreeDepth: 3,

                    lineStyle: {
                        width: 2
                    },

                    label: {
                        backgroundColor: '#fff',
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right'
                    },

                    leaves: {
                        label: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    },

                    expandAndCollapse: true,
                    animationDuration: 550,
                    animationDurationUpdate: 750
                }
            ]
            }
            echartsDemo1.setOption(option)
    },
    create_tree2()
    {
        let elementById = document.getElementById('echartsDemo2')
      let echartsDemo2 = this.$echarts.init(elementById)

      //处理颜色 把false的地方都变灰 遍历一遍
      for(var i=0;i< this.authorityList[1].children.length;i++)
      {
          if(this.authorityList[1].children[i].state==false)
          {
              this.authorityList[1].children[i].lineStyle={
                color:"#0000ff",
                borderColor:"#0000ff"
            }
          }
        else{//还是true继续遍历
            for(var j=0;j< this.authorityList[1].children[i].children.length;j++)
            {
                if(this.authorityList[1].children[i].children[j].state==false)
                {
                     this.authorityList[1].children[i].children[j].lineStyle={
                        color:"#0000ff",
                        borderColor:"#0000ff"
                    }
                }
            }
        }
      }
        let option = {
          tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series:[
                {
                    type: 'tree',
                    id: 0,
                    name: 'tree1',
                    data: [this.authorityList[1]],
                    top: '10%',
                    left: '12%',
                    bottom: '22%',
                    right: '20%',

                    symbolSize: 7,

                    edgeShape: 'polyline',
                    edgeForkPosition: '63%',
                    initialTreeDepth: 3,

                    lineStyle: {
                        width: 2
                    },

                    label: {
                        backgroundColor: '#fff',
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right'
                    },

                    leaves: {
                        label: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    },

                    expandAndCollapse: true,
                    animationDuration: 550,
                    animationDurationUpdate: 750
                }
            ]
            }
            echartsDemo2.setOption(option)
    }
    }
  }
  
</script>

<style lang="less" scoped>

</style>